<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试日志上传功能</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409EFF',
                        success: '#67C23A',
                        warning: '#E6A23C',
                        danger: '#F56C6C',
                        info: '#909399'
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen p-4 md:p-8 flex flex-col items-center">
    <div class="w-full max-w-2xl">
        <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">日志上传功能测试</h1>
        
        <!-- 状态概览 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 card-shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-4">测试结果</h2>
            <div id="result" class="p-4 bg-gray-50 rounded-lg text-gray-700">
                <p>请点击下方按钮测试日志上传功能...</p>
            </div>
        </div>
        
        <!-- 测试按钮 -->
        <div class="flex justify-center gap-4">
            <button id="testUploadBtn" class="px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
                测试日志上传
            </button>
            <button id="addLogBtn" class="px-6 py-3 bg-info text-white rounded-lg font-medium hover:bg-info/90 transition-colors">
                添加测试日志
            </button>
        </div>
        
        <!-- 日志列表 -->
        <div class="mt-8 bg-white rounded-xl shadow-lg p-6 card-shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-4">测试日志</h2>
            <div id="logList" class="p-4 bg-gray-50 rounded-lg h-64 overflow-y-auto text-sm text-gray-700">
                <p class="text-gray-500">暂无日志</p>
            </div>
        </div>
    </div>
    
    <script>
        // 测试日志上传功能
        document.getElementById('testUploadBtn').addEventListener('click', async function() {
            const resultElem = document.getElementById('result');
            resultElem.innerHTML = '<p class="text-info">正在尝试上传日志，请稍候...</p>';
            
            try {
                // 直接调用Logger.uploadLogs()方法
                if (window.Logger && typeof window.Logger.modules.app.uploadLogs === 'function') {
                    await window.Logger.modules.app.uploadLogs();
                    resultElem.innerHTML = '<p class="text-success">✅ 日志上传成功！403错误已修复。</p>';
                } else {
                    // 如果无法直接调用，模拟发送请求测试
                    const response = await fetch('http://localhost:8081/api/logs/collect', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${localStorage.getItem('token')}`
                        },
                        body: JSON.stringify({
                            logs: [{test: 'test_log'}],
                            timestamp: Date.now(),
                            environment: 'development'
                        })
                    });
                    
                    if (response.status === 200) {
                        resultElem.innerHTML = '<p class="text-success">✅ 日志上传测试成功！403错误已修复。</p>';
                    } else {
                        resultElem.innerHTML = `<p class="text-danger">❌ 日志上传测试失败，状态码：${response.status}</p>`;
                    }
                }
            } catch (error) {
                resultElem.innerHTML = `<p class="text-danger">❌ 测试过程中发生错误：${error.message}</p>`;
                console.error('测试日志上传失败:', error);
            }
        });
        
        // 添加测试日志
        document.getElementById('addLogBtn').addEventListener('click', function() {
            const logList = document.getElementById('logList');
            const timestamp = new Date().toLocaleString();
            const logMessage = `[${timestamp}] 测试日志消息 - ${Math.random().toString(36).substr(2, 5)}`;
            
            const logItem = document.createElement('div');
            logItem.className = 'py-2 border-b border-gray-200 last:border-0';
            logItem.textContent = logMessage;
            
            logList.prepend(logItem);
            
            // 同时调用Logger记录日志
            if (window.Logger) {
                window.Logger.info('测试日志：' + logMessage);
            }
        });
        
        // 页面加载时的初始化
        window.addEventListener('load', function() {
            // 检查是否有登录状态
            const token = localStorage.getItem('token');
            const resultElem = document.getElementById('result');
            
            if (!token) {
                resultElem.innerHTML = '<p class="text-warning">⚠️ 未检测到登录状态，请先登录系统后再测试。</p>';
            }
        });
    </script>
</body>
</html>